<template>
  <div>
    <zeda-dialog
      v-model="visible"
      width="80%"
      title="漏电监测详情"
      :before-close="handleClose"
    >
      <leakageChart :chartData="chartData" style="margin: 20px 0px 50px 0px" />
    </zeda-dialog>
  </div>
</template>
<script>
import leakageChart from "@/views/maintenance/realtime/inspect/components/leakageChart";
export default {
  components: {
    leakageChart,
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number], default: "" },
    leakageChartdata: { type: Object, default: {} },
  },
  data() {
    return {
      chartData: {},
    };
  },
  watch: {
    visible: {
      handler(value) {
        if (value) {
          this.getchartData();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getchartData() {
      this.chartData = this.leakageChartdata;
      // this.chartData = {
      //   legendData: ["bar1", "bar2", "bar3", "line1"],
      //   color: ["#ED7D31", "#A5A5A5", "#FFC000", "#5C9CD5"],
      //   xAxisData: ["1", "2", "3", "4", "5", "6", "7"],
      //   seriesData: [
      //     {
      //       name: "bar1",
      //       type: "bar",
      //       stack: "add",
      //       tooltip: {
      //         valueFormatter: function (value) {
      //           return value + " 单位";
      //         },
      //       },
      //       data: [
      //         2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 15.6, 12.2, 32.6, 20.0, 6.4, 3.3,
      //       ],
      //     },
      //     {
      //       name: "bar2",
      //       type: "bar",
      //       stack: "add",
      //       tooltip: {
      //         valueFormatter: function (value) {
      //           return value + " 单位";
      //         },
      //       },
      //       data: [
      //         2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3,
      //       ],
      //     },
      //     {
      //       name: "bar3",
      //       type: "bar",
      //       stack: "add",
      //       tooltip: {
      //         valueFormatter: function (value) {
      //           return value + " 单位";
      //         },
      //       },
      //       data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
      //     },
      //     {
      //       name: "line1",
      //       type: "line",
      //       yAxisIndex: 1,
      //       tooltip: {
      //         valueFormatter: function (value) {
      //           return value + " %";
      //         },
      //       },
      //       data: [
      //         12.0, 22.2, 13.3, 24.5, 26.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0,
      //         46.2,
      //       ],
      //     },
      //   ],
      // };
    },
    handleClose(status) {
      this.$emit("close", typeof status === "boolean" ? status : false);
    },
  },
};
</script>
